<template>
  <public-modal
    width="600px"
    :footer="false"
    title="餐厅信息编辑"
    modalStyle="visitor-detailModal"
    :publicVisible="publicVisible"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="common-title flex align-center">
        <div class="icon"></div>
        基本信息
      </div>

      <a-form-model
        :model="form"
        :rules="rules"
        ref="form"
        class="formStyle"
        autocomplete="off"
        layout="inline"
        :labelCol="{ style: 'width: 100px' }"
      >
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="负责人姓名" prop="chargeName">
              <a-input
                :maxLength="30"
                autocomplete="off"
                placeholder="请填写负责人姓名"
                v-model.trim="form.chargeName"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="负责人电话" prop="chargePhone">
              <a-input
                :maxLength="11"
                autocomplete="off"
                placeholder="请填写负责人电话"
                v-model.trim="form.chargePhone"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <div class="common-title flex align-center">
          <div class="icon"></div>
          营业信息
        </div>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="灶头数(个)" prop="stoveNum">
              <a-input :maxLength="5" autocomplete="off" placeholder="请填写灶头数" v-model.trim="form.stoveNum" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="餐饮类别" prop="type">
              <a-select placeholder="请选择餐饮类别" v-model="form.type">
                <a-select-option v-for="(item, index) in restaurantTypeList" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="清洗周期(天)" prop="cleanCycle">
              <a-input :maxLength="5" autocomplete="off" placeholder="请填写清洗周期" v-model.trim="form.cleanCycle" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="营业面积(㎡)" prop="businessArea">
              <a-input
                :maxLength="5"
                autocomplete="off"
                placeholder="请填写营业面积"
                v-model.trim="form.businessArea"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="就餐座位(个)" prop="seatingCapacity">
              <a-input
                :maxLength="5"
                autocomplete="off"
                placeholder="请填写就餐座位"
                v-model.trim="form.seatingCapacity"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="就业人数(个)" prop="employment">
              <a-input :maxLength="5" autocomplete="off" placeholder="请填写就业人数" v-model.trim="form.employment" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </public-modal>
</template>
<script>
import { ajaxGetDictItems } from '@/api/api'
import { editRestaurant } from '@/api/restaurant'
import publicModal from '@/components/publicModal'
export default {
  name: 'cancelModel',
  components: { publicModal },
  data() {
    return {
      form: {},
      records: {},
      rules: {
        chargeName: [{ required: true, message: '请填写负责人姓名' }],
        chargePhone: [
          { required: true, message: '请填写负责人电话' },
          {
            pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
            message: '请输入正确手机号',
          },
        ],
        stoveNum: [{ required: true, message: '请填写灶头数' }],
        type: [{ required: true, message: '请选择餐饮类别' }],
        cleanCycle: [{ required: true, message: '请填写清洗周期' }],
        businessArea: [{ required: true, message: '请填写营业面积' }],
        seatingCapacity: [{ required: true, message: '请填写就餐座位' }],
        employment: [{ required: true, message: '请填写就业人数' }],
        //  jurisdictionNo: [{ validator: this.validateJurisdiction, trigger: 'blur' }],
      },
      restaurantTypeList: [],
      publicVisible: false,
    }
  },
  mounted() {
    this.getDict()
  },
  methods: {
    async getDict() {
      let { result } = await ajaxGetDictItems({ code: 'restaurant_type' })
      this.restaurantTypeList = result
    },
    show(records) {
      this.records = records
      console.log(records, 'records')
      this.form = { ...records }
      this.form.type = records.type.toString()
      this.publicVisible = true
    },
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        this.form.id = this.records.id
        let data = { ...this.form }
        let res = await editRestaurant(data)
        this.form = {}
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
      })
    },
    cancel() {
      this.publicVisible = false
      this.form = {}
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 35px 42px;
}
.visitor-detailModal {
  .formStyle {
    padding: 0;
  }
  .common-title {
    font-size: 14px;
    font-weight: 400;
    color: #00f8ff;
    margin-bottom: 20px;
    .icon {
      width: 8px;
      height: 8px;
      background: #00f8ff;
      margin-right: 10px;
    }
  }
}
</style>
